<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>item_list</title>

    <!-- Bootstrap -->
    <!--<link th:href="@{/dataTables/css/dataTables.bootstrap.min.css}" rel="stylesheet">-->
    <link th:href="@{/datepicker/css/bootstrap-datepicker.css}" rel="stylesheet">
    <link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/custom/css/item_list.css}" rel="stylesheet">

</head>
<body>

<div class="tablediv">
    <table id="itemTable" class="table table-hover table-condensed">
        <thead>
        <tr>
            <th>序号</th>
            <th>商品名称</th>
            <th>店铺昵称</th>
            <th>价格</th>
            <th>付款数</th>
            <th>评价数</th>
            <th>地区</th>
            <th>日期</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

</div>

<script th:src="@{/bootstrap/js/jquery-1.9.1.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/datepicker/js/bootstrap-datepicker.min.js}"></script>
<script th:src="@{/datepicker/js/bootstrap-datepicker.zh-CN.min.js}"></script>
<!-- <script th:src="@{/dataTables/js/jquery.dataTables.min.js}"></script> -->
<!-- <script th:src="@{/dataTables/js/dataTables.bootstrap.min.js}"></script>-->

<script type="text/javascript">
    $(function () {
        // 表格
        var table = $('#itemTable').DataTable({
            // 是否允许检索
            "searching": false,
            // 是否允许排序
            "ordering": false,
            // 初期排序列
            // 是否显示情报 就是"当前显示1/100记录"这个信息
            "info": false,
            // 是否允许翻页，设成false，翻页按钮不显示
            "paging": false,
            // 水平滚动条
            "scrollX": false,
            // 垂直滚动条
            "scrollY": false,
            // 自动列宽
            //"autoWidth": true,
            // 每次创建是否销毁以前的DataTable,默认false
            "destroy": false,
            // 服务器端处理方式
            "serverSide": true,
            // ajax选项 可以直接简单指定成请求的文件
            //"ajax": "data.json",
            "ajax": {
                url: "/items",
                type: 'post',
                contentType: "application/json",
                data: function (param) {
                    if (param != null) {
                        return JSON.stringify(param);
                    }
                    return param;
                    //                    param.platformId = $('#platformSelect').val();
                    //                    param.brandId = $('#brandSelect').val();
                    //                    param.keywordId = $('#keywordSelect').val();
                },
                dataSrc: function (data) {
                    if (data != null) {
                        for (var i = 0, ien = data.length; i < ien; i++) {
                            data[i].index = i + 1;
                            data[i].nameurl = "<a href='" + data[i].url + "' target='_blank'>" + data[i].itemName + "</a>";
                            data[i].date = data[i].datetime.substr(0, 10);
                        }
                    }
                    return "";
                }
            },
            "columns": [
                {"data": 'index', orderable: false},
                {"data": 'nameurl', orderable: false},
                {"data": 'shopName', orderable: true},
                {"data": 'price', orderable: true},
                {"data": 'saleCount', orderable: true},
                {"data": 'commentCount', orderable: true},
                {"data": 'location', orderable: true},
                {"data": 'date', orderable: true}
            ],
        });
//        table.on('xhr',function(){
//            var json = table.ajax.json();
//            console.info(json);
//        })
    })
</script>
</body>
</html>